import { motion } from 'framer-motion'

const companies = [
  'Shopify',
  'OpenAI',
  'Uber',
  'Perplexity',
  'Midjourney',
  'Samsung',
  'Instacart',
  'Ramp',
  'Robinhood'
]

function Hero() {
  return (
    <section className="w-full min-h-screen flex items-center justify-center text-center">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <motion.h1 
          className="text-6xl md:text-7xl font-bold bg-gradient-to-r from-blue-500 to-purple-500 bg-clip-text text-transparent mb-6"
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5 }}
        >
          The AI Code Editor
        </motion.h1>
        
        <motion.p 
          className="text-xl text-[var(--text-primary)] mb-8"
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5, delay: 0.1 }}
        >
          Fast, intelligent, and private,<br />
          Cursor is the best way to code with AI.
        </motion.p>

        <motion.div
          className="flex flex-col sm:flex-row gap-4 justify-center"
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5, delay: 0.2 }}
        >
          <button className="px-8 py-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors">
            Download for mac
          </button>
          <button className="px-8 py-3 bg-transparent border border-gray-600 text-[var(--text-primary)] rounded-lg hover:border-gray-400 transition-colors">
            Watch Demo
          </button>
        </motion.div>

        <motion.p 
          className="mt-12 text-[var(--text-primary)] uppercase tracking-wider text-sm font-medium"
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ duration: 0.5, delay: 0.3 }}
        >
          Trusted by Engineers at
        </motion.p>

        <motion.div 
          className="mt-8 grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-8 max-w-4xl mx-auto"
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ duration: 0.5, delay: 0.4 }}
        >
          {companies.map((company, index) => (
            <motion.span
              key={company}
              className="font-mono font-bold text-2xl text-[var(--text-secondary)] hover:text-[var(--text-primary)] transition-colors duration-300"
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              transition={{ delay: index * 0.1 }}
            >
              {company}
            </motion.span>
          ))}
        </motion.div>
      </div>
    </section>
  )
}

export default Hero 